import React, { useState, useEffect } from 'react';
import styled from '@emotion/styled';
import { get } from 'lodash';
import { Container, Jumbotron, Form, Button, Navbar } from 'react-bootstrap';
import { useParams } from 'react-router-dom';
import { Formik, useFormikContext } from 'formik';
import InsuranceNotification from './InsuranceNotification';
import ZSpinner from '../ZSpinner';
import { useProduct, useTrack } from '../../service';

const Banner = ({ product }) => (
  <Jumbotron style={{ marginTop: '1rem' }}>
    <h4>{get(product, 'name')}</h4>
    <p>产品详情</p>
  </Jumbotron>
);

const Footer = styled(Navbar)`
  border-top: 1px solid lightgray;
  background-color: white;
  box-shadow: 0px -4px 5px 0px rgba(0, 0, 0, 0.1);
`;

const ProductForm = ({ product, onFormChange }) => {
  const { values, handleSubmit, handleChange } = useFormikContext();

  useEffect(() => {
    onFormChange && onFormChange(values);
  }, [values, onFormChange]);

  return (
    <Form noValidate onSubmit={handleSubmit}>
      <Form.Group controlId="name">
        <Form.Label>投保人姓名</Form.Label>
        <Form.Control
          type="text"
          name="applicant_name"
          placeholder="请填写投保人姓名"
          onChange={handleChange}
        />
        <Form.Text className="text-muted">填写的动作会被记录</Form.Text>
      </Form.Group>

      <Form.Group controlId="applicant_gender">
        <Form.Label>选择性别</Form.Label>
        <Form.Control
          as="select"
          name="applicant_gender"
          onChange={handleChange}
        >
          <option>男</option>
          <option>女</option>
        </Form.Control>
      </Form.Group>

      <Form.Group controlId="comment">
        <Form.Label>备注</Form.Label>
        <Form.Control
          as="textarea"
          rows="3"
          name="comment"
          placeholder="请填写备注信息"
          onChange={handleChange}
        />
      </Form.Group>

      <Form.Group>
        <InsuranceNotification product={product} />
      </Form.Group>

      <Form.Group controlId="submit">
        <Footer fixed="bottom">
          <Button variant="primary" type="submit">
            提交
          </Button>
        </Footer>
      </Form.Group>
    </Form>
  );
};

const Product = () => {
  const { id } = useParams();
  const [loading, product] = useProduct(id);
  const [values, setValues] = useState({
    applicant_name: '测试',
    applicant_gender: '男',
    comment: '备注信息'
  });
  //
  const [session] = useState(id + new Date().getMilliseconds());
  // 使用产品 ID 作为跟踪路径
  const [, , submit] = useTrack(session);

  return (
    <ZSpinner loading={loading}>
      <Container style={{ paddingBottom: '4rem' }}>
        <Banner product={product} />
        <Formik
          initialValues={values}
          style={{ paddingBottom: '5rem' }}
          onSubmit={async (values) => {
            await submit(values, true);
            window.top.postMessage({ session }, '*');
            alert('请查看回放');
          }}
        >
          <ProductForm product={product} onFormChange={setValues} />
        </Formik>
      </Container>
    </ZSpinner>
  );
};

export default Product;
